import { Progress } from 'antd';
import { useEffect, useState } from 'react';

/***
 *
 * @param data 具体的进度【实时变化】可以作为计算 整体进度 的effect依赖值
 * @param sliceHash 文件的整/分【在slice完毕的时候就能获取到的】
 * @constructor
 */
// @ts-ignore
const ProgressBars = ({ data, files: { sliceHash = [] } = {} }) => {
  const [progress, setProgress] = useState(0);
  const totalProgress = () => {
    const allFullProgress = sliceHash.length * 100 || 1;
    let runtimeProgress = 0;
    for (let prop in data) {
      if (data.hasOwnProperty(prop)) {
        runtimeProgress = runtimeProgress + data[prop];
      }
    }
    setProgress(Math.floor((runtimeProgress / allFullProgress) * 100));
  };

  useEffect(() => {
    totalProgress();
  }, [data]);

  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      <div>
        <h3>
          𝓐、𝓑、𝓒、𝓓、𝓔、𝓕、𝓖、𝓗、𝓘、𝓙、𝓚、𝓛、𝓜、𝓝、𝓞、𝓟、𝓠、𝓡、𝓢、𝓣、𝓤、𝓥、𝓦、𝓧、𝓨、𝓩
        </h3>
        <h3>
          𝓪、𝓫、𝓬、𝓭、𝓮、𝓯、𝓰、𝓱、𝓲、𝓳、𝓴、𝓵、𝓶、𝓷、𝓸、𝓹、𝓺、𝓻、𝓼、𝓽、𝓾、𝓿、𝔀、𝔁、𝔂、𝔃
        </h3>
        <span>整体进度计算{progress}</span>
        <Progress percent={progress} type="circle" />
      </div>
      {/*@ts-ignore*/}
      {sliceHash.map((e) => {
        return <Progress percent={data[e] || 0} key={e} />;
      })}
    </div>
  );
};

export default ProgressBars;
//  𝓐、𝓑、𝓒、𝓓、𝓔、𝓕、𝓖、𝓗、𝓘、𝓙、𝓚、𝓛、𝓜、𝓝、𝓞、𝓟、𝓠、𝓡、𝓢、𝓣、𝓤、𝓥、𝓦、𝓧、𝓨、𝓩
//  𝓪、𝓫、𝓬、𝓭、𝓮、𝓯、𝓰、𝓱、𝓲、𝓳、𝓴、𝓵、𝓶、𝓷、𝓸、𝓹、𝓺、𝓻、𝓼、𝓽、𝓾、𝓿、𝔀、𝔁、𝔂、𝔃
